<template>
  <div ref="sliderRef" class="zee-slider" v-bind="$attrs">
    <span>{{ status ? successTxt : defaultTxt }}</span>
    <div ref="blockRef" class="zee-slider__block">
      <i-ph-caret-double-right-bold v-show="!status" />
      <i-ph-check-bold v-show="status" />
    </div>
  </div>
</template>

<script setup lang="ts" name="ZSlider">
import system from '@/store/system';

const { t } = useI18n();
const piniaSystem = system(); // 系统设置
const emits = defineEmits(['change']);
const props = defineProps({
  // 标题
  successTxt: {
    type: String,
    default: '',
  },
  defaultTxt: {
    type: String,
    default: '',
  },
});

const data: any = reactive({
  sliderRef: null,
  blockRef: null,
  status: false,
  value: 0,
  successTxt: props.successTxt || t('login.verifySuccess'),
  defaultTxt: props.defaultTxt || t('login.moveSlider')
});

const { sliderRef, blockRef, status, successTxt, defaultTxt} = toRefs(data);

// 监听管理
watch(
  () => status.value,
  (val, preVal) => {
    emits('change', val);
  },
  { immediate: false, deep: true },
);

const sliderStart = () => {
  const mousedown: string = piniaSystem.getIsH5 ? 'touchstart' : 'mousedown';
  const mousemove: string = piniaSystem.getIsH5 ? 'touchmove' : 'mousemove';
  const mouseup: string = piniaSystem.getIsH5 ? 'touchend' : 'mouseup';
  const downHandler = (e: any) => {
    const max = sliderRef.value.clientWidth - blockRef.value.clientWidth;
    // 记录鼠标的x值
    const startX = e.clientX || e.changedTouches[0].clientX;
    // 移动
    const moveHandler = (evt: any) => {
      const moveX = (evt.clientX || evt.changedTouches[0].clientX) - startX; // 移动的值
      moveX > 0 && (blockRef.value.style.transform = `translateX(${moveX}px)`);
      if (moveX >= max) {
        blockRef.value.style.transform = `translateX(${max - 10}px)`;
        blockRef.value.removeEventListener(mousedown, downHandler);
        sliderRef.value.classList.add('zee-movedone');
        status.value = true;
      }
    };
    // 弹起
    const upHandler = (evt: any) => {
      const endX = (evt.clientX || evt.changedTouches[0].clientX) - startX; // 最后记录的值
      if (endX < max) {
        blockRef.value.style.transform = `translateX(${0}px)`;
      }
      document.removeEventListener(mousemove, moveHandler);
      document.removeEventListener(mouseup, upHandler);
    };
    // 移动
    document.addEventListener(mousemove, moveHandler);
    // 弹起
    document.addEventListener(mouseup, upHandler);
  };
  blockRef.value.addEventListener(mousedown, downHandler);
};

// 重置滑块
const resetSlider = () => {
  status.value = false;
  blockRef.value.style.transform = `translateX(0px)`;
  sliderRef.value.classList.remove('zee-movedone');
  sliderStart();
};

onMounted(() => {
  sliderStart();
});

defineExpose({
  resetSlider,
});
</script>

<style lang="scss" scoped>
$height: var(--rem-54);
$bgColor: var(--slider-bg);
$fontSize: var(--rem-14);
$color: #5b677e;
.zee-slider {
  user-select: none;
  color: $color;
  font-size: $fontSize;
  width: 100%;
  border-radius: $height;
  overflow: hidden;
  height: $height;
  line-height: $height;
  text-align: center;
  background-color: $bgColor;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 500ms;
  span {
    width: 100%;
    position: absolute;
  }
  &.zee-movedone {
    background-color: #f6621b;
    color: #fff;
    .zee-slider__block {
      transition: all 500ms;
      height: var(--rem-40);
      background-color: #fff;
      color: #f6621b;
    }
  }
  .zee-slider__block {
    height: 100%;
    width: var(--rem-80);
    transform: translateX(0);
    // transition: all 300ms;
    color: #fff;
    border-radius: $height;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f6621b;
    cursor: move;
    svg {
      font-size: 24rem;
    }
  }
}
</style>
